<template>
  <div class="login">
    <el-card class="bac">
      <div slot-scope="">
        <el-button icon="el-icon-back" @click="backToIndex">返回首页</el-button>
      </div>
      <el-card class="card">
        <div slot="header" class="clearfix">
          <span>心理咨询平台</span>
        </div>
        <el-tabs v-model="currentIndex" stretch @tab-click="handleClick">
          <!-- 登录 -->
          <el-tab-pane label="登录" name="login">
            <el-form
              ref="loginRuleForm"
              :model="loginForm"
              :rules="rules"
              status-icon
              label-width="100px"
            >
              <el-form-item label="用户名" prop="username">
                <el-input
                  v-model="loginForm.username"
                  type="text"
                  autocomplete="off"
                  placeholder="请输入用户名"
                />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="loginForm.password" type="password" autocomplete="off" placeholder="请输入密码" />
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="14">
                    <el-button type="primary" @click="submitForm('loginRuleForm')">登录</el-button>
                  </el-col>
                  <el-col :span="10">
                    <el-button type="text" @click="toAdminLogin">管理员登录,请点击此处</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- 注册 -->
          <el-tab-pane label="注册" name="register">
            <el-form ref="registerForm" :model="registerForm" status-icon label-width="100px" :rules="rules">
              <el-form-item label="用户名" prop="username">
                <el-input
                  v-model="registerForm.username"
                  type="text"
                  auto-complete="off"
                  placeholder="请输入用户名"
                />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="registerForm.password"
                  type="password"
                  auto-complete="off"
                  placeholder="请输入密码"
                />
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPassword">
                <el-input
                  v-model="registerForm.checkPassword"
                  type="password"
                  auto-complete="off"
                  placeholder="请确认密码"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="customRegister('registerForm')">注册</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import { register } from '@/api/user'
export default {
  name: 'FrontLogin',
  data() {
    // 验证规则
    var validateUserName = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.registerForm.confirmPassword !== '') {
          this.$refs.registerForm.validateField('checkPassword')
        }
        callback()
      }
    }
    var validateCheckPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请重新输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次密码不一样'))
      } else {
        callback()
      }
    }
    return {
      currentIndex: 'login',
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: '',
        checkPassword: ''
      },
      rules: {
        username: [
          { validator: validateUserName, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ],
        checkPassword: [
          { validator: validateCheckPassword, trigger: 'blur' }
        ]
      }
    }
  },
  mounted: function() {
  },
  methods: {
    // 提交登录表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.go(-1)// 返回并刷新页面
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    // 提交注册表单
    customRegister(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          register(this.registerForm).then(() => {
            this.$message({
              message: '注册成功',
              type: 'success'
            })
            this.$router.push('/login')
          })
        } else {
          this.$message.error('注册失败')
        }
      })
    },
    toAdminLogin() {
      console.log('去到管理员登录页面')
      this.$router.replace('/back/login')
    },
    backToIndex() {
      this.$router.push('/index')
    },
    handleClick(tab, event) {
      // console.log(tab, event)
      // console.log(tab.$options.propsData.label === '登录')
      if (tab.$options.propsData.label === '登录') {
        this.registerForm.username === ' '
        this.registerForm.password === ' '
        this.registerForm.checkPassword === ' '
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
}
.bac{
  width:100%;
  height: 937px;
  background-color: #BAB2A3;
}
.card {
  width: 600px;
  margin: 100px auto;
  background-color: #FFEFCA;
}
.clearfix {
  text-align: center;
}
</style>
